<template>
	<view>
		<!-- commission头部组件 -->
		<commheader></commheader>
			
		<view class="user_box">
			<view class="user_box_left">
				<navigator class="user_box_left_sm" url="../member/shouyi" hover-class="none">
					<view class="yuer">
						13.44
					</view>
					<view class="user_sm_span">
						可用潮人豆(元)
					</view>
				</navigator>
				<view class="user_box_left_sm">
					<view class="yuer">
						0.00
					</view>
					<view class="user_sm_span">
					今日收益(元)
					</view>
				</view>
			</view>
			<view class="user_box_right">
				<view class="user_box_left_sm" style="border-right:none">
					<view class="yuer">
						0.00
					</view>
					<view class="user_sm_span">
					总佣金(元)
					</view>
				</view>
				<navigator hover-class="none" class="ti_loa" url="">资金提现</navigator>
			</view>
		</view>
		<!-- 大小潮人权益组件 -->
		<vipquanyi></vipquanyi>
		
		<view class="yue_tui_box">
		<navigator hover-class="none" url="" class="yue_tui">
			<image src="http://wx.crh2009.com/attachment/images/2/2020/07/YUmW1atr3j3EWj1VAQWG9Wu91nEQts.jpg" class="shengimg" mode="widthFix"></image>
		</navigator>
		</view>
		
		<!-- 小块分类列表 上 start -->
		<view class="dhb">
		<view class="okd_ul">
			<navigator class="okd_li" hover-class="none" url="../mobile/qiandao">
				<image src="../../static/cos1.png" class="okd_img"></image>
				<view class="okd_span">签到亮佣</view>
			</navigator>
			<navigator class="okd_li" hover-class="none" url="">
				<image src="../../static/cos2.png" class="okd_img"></image>
				<view class="okd_span">升级奖励</view>
			</navigator>
			<navigator class="okd_li" hover-class="none" url="">
				<image src="../../static/cos3.png" class="okd_img"></image>
				<view class="okd_span">8月奖励</view>
			</navigator>
		</view>
		<view class="okd_ul">
			<navigator class="okd_li" hover-class="none" url="../mobile/down">
				<image src="../../static/cos4.png" class="okd_img"></image>
				<view class="okd_span">我的团队</view>
			</navigator>
			<navigator class="okd_li" hover-class="none" url="../mobile/haibaolist">
				<image src="../../static/cos5.png" class="okd_img"></image>
				<view class="okd_span">邀请好友</view>
			</navigator>
			<navigator class="okd_li" hover-class="none" url="../member/chaorder">
				<image src="../../static/cos6.png" class="okd_img"></image>
				<view class="okd_span">收益明细</view>
			</navigator>
		</view>
		</view>
		<!-- 小块分类列表 上 end -->
		<!-- 图片分类列表 start -->
		<view class="slides">
		<navigator hover-class="none" url="../rw/rw" class="slides_a">
			<image src="../../static/com1.png" class="com_img" mode="widthFix"></image>
		</navigator>
			<navigator hover-class="none" url="../mobile/bang" class="slides_a">
				<image src="../../static/com2.png" class="com_img" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="../lianmeng/lianmeng" class="slides_a">
				<image src="../../static/com3.png" class="com_img" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="" class="slides_a">
				<image src="../../static/com4.png" class="com_img" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="../mobile/study" class="slides_a">
				<image src="../../static/com5.png" class="com_img" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="" class="slides_a">
				<image src="../../static/com6.png" class="com_img" mode="widthFix"></image>
			</navigator>
		</view>
		<!-- 图片分类列表 end -->
		<navigator hover-class="none" url="" class="yue_tui">
			<image src="../../static/jiaimg.png" class="yue_img" mode="widthFix"></image>
		</navigator>
			
		<!-- 任务组件 -->
		<dayrw></dayrw>

		<!-- 小块分类列表 下 start -->
		<view class="dhb">
		<view class="okd_ul okd_ul2">
			<navigator class="okd_li" hover-class="none" url="../member/info">
				<image src="../../static/cos5.png" class="okd_img"></image>
				<view class="okd_span">完善资料</view>
			</navigator>
			<navigator class="okd_li" hover-class="none" url="../member/shouyiasd">
				<image src="../../static/cos7.png" class="okd_img"></image>
				<view class="okd_span">成长明细</view>
			</navigator>
		</view>
		<view class="okd_ul okd_ul2">
			<navigator class="okd_li" hover-class="none" url="">
				<image src="../../static/cos8.png" class="okd_img"></image>
				<view class="okd_span">平台简介</view>
			</navigator>
			<navigator class="okd_li" hover-class="none" url="../mobile/withdraw">
				<image src="../../static/cos9.png" class="okd_img"></image>
				<view class="okd_span">提现明细</view>
			</navigator>
		</view>
		</view>
		<!-- 小块分类列表 下 end -->

		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</image>
		</view>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	import commheader from '../../component/commission/commheader.vue';  //commission头部组件 
	import vipquanyi from '../../component/commission/vipquanyi.vue';    // 大小潮人权益组件 
	import dayrw from '../../component/commission/dayrw.vue';  //任务组件
	export default{
		components:{
		fixce,
		commheader,
		vipquanyi,
		dayrw
		},
		data(){
			return{
				 topState:false
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　}
		}
	}
</script>

<style>
.yue_tui_box{
	padding:20rpx 0;
	background-color: rgb(243,243,243);
	margin-top:25rpx;
}
.yue_tui{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.yue_img{
	width:90%;
	margin:20rpx 0;
}
.shengimg{
	width:100%;
}
.user_box{
	width:100%;
	border-top: 2rpx solid #ececec;
	border-bottom: 2rpx solid #ececec;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin:20rpx 0;
}
.user_box_left{
	width:50%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.user_box_left_sm{
	width:50%;
	border-right: 2rpx solid #ececec;
	padding:8rpx 0 15rpx 0;
	text-align: center;
}
.yuer{
	    color: #ff80c0;
		font-weight:500;
		font-size:36rpx;
}
.user_sm_span{
		font-size:22rpx;
}
.user_box_right{
	width:50%;
	display: flex;
	align-items: center;
}
.ti_loa{
	font-size: 25rpx;
	display: inline-block;
	padding: 10rpx 20rpx;
	background: #ff80c0;
	color: #fff;
	border-radius: 100rpx;
	font-weight: 300;
}
.slides{
	width:98%;
	margin:0 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items: flex-start;
}
.slides_a{
	width:49.5%;
}
.com_img{
	width:100%;
    margin-top:-2rpx;
}
.dhb{
	margin-bottom:20rpx;
	border-top: 2rpx solid #ececec;
}
.okd_ul{
	border-bottom: 2rpx solid #ececec;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.okd_li{
	width:33%;
	padding:10rpx 0;
	text-align: center;
	border-right: 2rpx solid #ececec;
}
.okd_img{
	width:50rpx;
	height:50rpx;
}
.okd_span{
	color:#666;
	font-size:25rpx;
}
.okd_ul2 .okd_li{
	width:50%;
}
</style>
